<template>
	<div id="nav">
		<img src="../assets/images/logo.png" class="log">
		<ul class="list">
			<li>
				<router-link to="/">首页</router-link>
			</li>
			<li>
				<router-link to="/about">关于水镇</router-link>
			</li>
			<li>活动一览</li>
			<li>
				<router-link to="/reserve">在线预订</router-link>
			</li>
			<li>
				<router-link to="/commercial">商务会展</router-link>
			</li>
			<li class="after">
				<router-link to="/travel">旅游宝典</router-link>
			</li>
		</ul>
		<div class="right">
			<div class="weather">
				<span>密云</span>
				<img src="../assets/images/b0.png">
				<span>~3°C~9°C</span>
			</div>
			<p class="login">登录</p>
			<div>
				<svg t="1637975980806" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="740">
					<path
						d="M409.6 793.6c-10.24 0-19.968-6.144-23.552-15.872L187.392 281.6H25.6c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h196.608l211.456 527.872c5.12 13.312-1.024 28.16-14.336 33.28-3.584 1.536-6.656 2.048-9.728 2.048z"
						fill="#bfbfbf" p-id="741"></path>
					<path
						d="M460.8 844.8c-42.496 0-76.8-34.304-76.8-76.8s34.304-76.8 76.8-76.8 76.8 34.304 76.8 76.8-34.304 76.8-76.8 76.8z m0-102.4c-14.336 0-25.6 11.264-25.6 25.6s11.264 25.6 25.6 25.6 25.6-11.264 25.6-25.6-11.264-25.6-25.6-25.6zM819.2 844.8c-42.496 0-76.8-34.304-76.8-76.8s34.304-76.8 76.8-76.8 76.8 34.304 76.8 76.8-34.304 76.8-76.8 76.8z m0-102.4c-14.336 0-25.6 11.264-25.6 25.6s11.264 25.6 25.6 25.6 25.6-11.264 25.6-25.6-11.264-25.6-25.6-25.6z"
						fill="#bfbfbf" p-id="742"></path>
					<path
						d="M768 793.6h-256c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h256c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM937.984 614.4H337.92c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h560.128l57.344-230.4H358.4c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h662.528l-82.944 332.8z"
						fill="#bfbfbf" p-id="743"></path>
				</svg>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Navigation',
		props: ['Nav_msg'],
		data() {
			return {
				msg1: this.Nav_msg,
			}
		}
	}
</script>

<style scoped="scoped">
	#nav {
		width: 1798px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		background-color: rgba(0, 0, 0, 0.25);
		padding: 0 50px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.3);
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		z-index: 99;
	}

	.log {
		width: 146px;
		height: 50px;
		margin-top: 13px;
	}

	.list {
		display: flex;
		justify-content: space-between;
		width: 652px;
		height: 72px;
		line-height: 72px;
		align-items: center;
		cursor: pointer;
	}

	.list li {
		flex-grow: 1;
		height: 20px;
		color: #fff;
		line-height: 20px;
		border-right: 1px solid #ccc;
		text-align: center;
		font-weight: 800;
	}

	.list li a {
		color: #fff;
	}

	.list .after {
		border: none;
	}

	.list li:hover a{
		color: #a19063;
	}

	.right {
		display: flex;
		align-items: center;
		margin-right: 20px;
	}

	.weather {
		width: 163px;
		color: #fff;
		font-size: 12px;
		display: flex;
		align-items: center;
	}

	.weather>img {
		width: 25px;
		height: 25px;
	}

	.login {
		color: #fff;
		font-size: 12px;
		margin-right: 32px;
	}

	.icon {
		width: 26px;
	}
</style>
